<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8" />
    <title>总结Vue监视数据</title>

    <script type="text/javascript" src="../js/vue.js"></script>


</head>

<body>

    <!--准备好一个容器-->

    <div id="root">
        <h1>学生信息</h1>

        <h2>操作</h2>
        <button @click="student.age++">年龄增加+1岁</button>
        <button @click="addSex">添加性别属性，默认值：男</button>
        <button @click="changeSex">修改性别属性到与当前相反的值</button>
        <button @click="addFriend">在列表首位添加一个朋友</button>
        <button @click="changeFirstFriendName">修改第一个朋友的名字为：张三</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="changeFirstHobby">修改第一个爱好为：开车</button>



        <h2>姓名：{{student.name}}</h2>
        <h2>年龄：{{student.age}}</h2>
        <h2>性别：{{student.sex}}</h2>

        <h2>该学生的爱好（多个）</h2>
        <ul v-for="h in student.hobby" :key="index">
            <li>{{h}}</li>
        </ul>


        <h2>该学生的朋友（多个）</h2>
        <ul v-for="f in student.friends" :key="f.id">
            <li>{{f.name}}-{{f.age}}</li>
        </ul>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false

        const vm = new Vue({
            el: "#root",
            data: {
                sexType:false,//false表示女，true表示男
                student: {
                    name: "wyy",
                    age: 18,
                    hobby:["抽烟","喝酒","烫头"],
                    friends: [
                        { name: "test1", age: 22 },
                        { name: "test2", age: 33 },
                    ]
                }
            },
            methods: {
                addSex(){
                    Vue.set(this.student, "sex", "男")
                },
                changeSex(){
                    if(this.sexType === false){
                        this.sexType = true
                        this.student.sex = "男"
                    }else if(this.sexType === true){
                        this.sexType = false
                        this.student.sex = "女"
                    }
                },
                addFriend(){
                    this.student.friends.unshift({name:"test3",age:26})
                },
                changeFirstFriendName(){
                    this.student.friends[0].name = "张三"
                },
                addHobby(){
                    this.student.hobby.push("学习")
                },
                changeFirstHobby(){
                    // this.student.hobby[0] = "开车"
                    // this.student.hobby.splice(0, 1, "开车")
                    // this.$set(this.student.hobby,0,"开车")
                    Vue.set(this.student.hobby, 0, "开车")
                }

            }
        })


    </script>
</body>


</html>